<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="ID编号" prop="idNumber">
        <el-input v-model="queryParams.idNumber" placeholder="请输入ID编号" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="queryParams.nickname" placeholder="请输入昵称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="用户ID" prop="userid">
        <el-input v-model="queryParams.userid" placeholder="请输入userid" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="筛选" prop="type">
        <el-select style="width: 240px" v-model="queryParams.type" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="type">
        <el-select style="width: 240px" v-model="queryParams.type" clearable placeholder="请选择">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="roleList" >
      <el-table-column label="停用账户" prop="idNumber" align="center">
        <template #default="{row,$index}">
          <el-switch
            @change="switchChange(row,$index)"
            v-model="row.status+''"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="是否为主播" prop="isRobot" align="center" min-width="150">
        <template #default="{row,$index}">
          <el-switch
            @change="streamerChange(row,$index)"
            v-model="row.isRobot+''"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="2"
            inactive-value="1">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="V级别" prop="userLevel" align="center">
        <template #default="{row}">
          <div>
            <el-tag v-if="row.userLevel==1">V1</el-tag>
            <el-tag v-else-if="row.userLevel==2" type="success">V2</el-tag>
            <el-tag v-else-if="row.userLevel==3" type="info">V3</el-tag>
            <el-tag v-else-if="row.userLevel==4" type="warning">V4</el-tag>
            <el-tag v-else-if="row.userLevel==5" type="danger">V5</el-tag>
            <el-tag v-else-if="row.userLevel==6">V6</el-tag>
            <el-tag v-else-if="row.userLevel==7" type="success">V7</el-tag>
            <div v-else>--</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="userid" align="center">
        <template #default="{row}">
          <div>
            {{row.userid || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="ID编号" prop="idNumber" align="center" min-width="120px">
        <template #default="{row}">
          <div>
            {{row.idNumber || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="上级头像" prop="avatarUrl" align="center">
        <template #default="{row}">
          <div>
            <el-image :src="imageUrl+row.leaderurl"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="上级昵称" prop="leadername" align="center" min-width="120px">
        <template #default="{row}">
          <div>
            {{row.leadername || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="上级ID" prop="leadeuserid" align="center" min-width="120px">
        <template #default="{row}">
          <div>
            {{row.leadeuserid || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="上级ID编号" prop="leadeidNumber" align="center" min-width="120px">
        <template #default="{row}">
          <div>
            {{row.leadeidNumber || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="上级微信号" prop="leadewechatId" align="center" min-width="120px">
        <template #default="{row}">
          <div>
            {{row.leadewechatId || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="头像" prop="avatarUrl" align="center">
        <template #default="{row}">
          <div>
            <el-image :src="imageUrl+row.avatarUrl"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" align="center">
        <template #default="{row}">
          <div>
            {{row.name || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="昵称" prop="nickname" align="center" min-width="120px">
        <template #default="{row}">
          <div>
            {{row.nickname || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="密码" prop="password" align="center">
        <template #default="{row}">
          <div>
            {{row.password || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="能量" prop="energy" align="center">
        <template #default="{row}">
          <div>
            {{row.energy || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="身份证号" prop="idCard" align="center" min-width="200px">
        <template #default="{row}">
          <div>
            {{row.idCard || '--'}}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="手机号" prop="mobile" align="center" min-width="120px">
        <template #default="{row}">
          <div>
            {{row.mobile || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="登录时间" align="center" prop="loginTime"  width="160">
        <template #default="{row}">
          <span>{{ parseTime(row.loginTime) || '--' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="积分" align="center" width="100" prop="points">
        <template #default="{row}">
          <div>
            {{row.points || '--'}}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="微信号" align="center" width="100" prop="wechatId">
        <template #default="{row}">
          <div>
            {{row.wechatId || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100" prop="status">
        <template #default="{row}">
          <div>
            <el-tag v-if="row.status==0">正常</el-tag>
            <el-tag v-else-if="row.status==1" type="success">停用</el-tag>
            <div v-else>{{row.status || '--'}}</div>

          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime"  width="160">
        <template #default="{row}">
          <span>{{ parseTime(row.createTime) || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right"  min-width="400">
        <template #default="{row}">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-connection"
            @click="energy(row)"
          >能量增减
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-connection"
            @click="points(row)"
          >积分增减
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="fancyNumber(row)"
          >设置靓号
          </el-button>

          <el-button icon="el-icon-search" type="text" @click="handlewater(row)">流水</el-button>
          <el-button icon="el-icon-bottom-right" type="text" @click="hairpin(row)">发卡</el-button>
          <el-button icon="el-icon-search"  type="text" @click="transfer(row)">转赠记录</el-button>
          <el-button icon="el-icon-top-right" type="text" @click="specify(row)">指定上级</el-button>
          <el-button icon="el-icon-top-right" type="text" @click="handleVip(row)">设定V67</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <add ref="addRef" @success="getList"/>
    <water ref="waterRef"/>
    <processData ref="processDataRef"/>
    <hairpin ref="hairpinRef"/>
    <transfer ref="transfererRef"/>
    <fancyNumber ref="fancyNumberRef" @success="getList"/>
    <setLevel ref="setLevelRef" @success="getList"/>
  </div>
</template>

<script>
import {listPage,userStatus,updateIdnumber,changeSuperior,userZbStatus} from "@/api/user/user"
import {imgUrl} from '@/api/index/index'
import add from "./components/add.vue"
import water from "./components/water"
import processData from "./components/processData"
import hairpin from "./components/hairpin"
import transfer from "./components/transfer"
import fancyNumber from './components/fancyNumber'
import setLevel from './components/setLevel'
export default {
  name: "Role",
  components: {
    add,
    water,
    processData,
    hairpin,
    transfer,
    fancyNumber,
    setLevel
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        idNumber:undefined,//	ID编号
        mobile:undefined,//手机号
        name: undefined,//姓名
        nickname:undefined,//昵称
        status:undefined,//0正常,1停用
        type:undefined,//排序 0：积分 1：能量
        userid:undefined,//ID
      },
      imageUrl:imgUrl,
      options: [{
        value: '0',
        label: '积分'
      }, {
        value: '1',
        label: '能量'
      }],
      status:[
        {
          value: '0',
          label: '正常'
        }, {
          value: '1',
          label: '停用'
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleVip(row){
      let obj = {
        userLevel:row.userLevel,
        userid:row.userid
      }
      this.$refs.setLevelRef.open(obj)
    },
    // 指定上级
    specify(row){
      this.$prompt('请输入上级ID', '指定上级', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(async ({ value }) => {
        await changeSuperior({
          leadeidNumber:value,
          userid:row.userid
        })
        this.$message({
          type: 'success',
          message: '修改成功'
        });
        this.getList()
      })
    },
    // 转赠记录
    transfer(row){
      this.$refs.transfererRef.onOpen(row.userid)
    },
    // 发卡
    hairpin(row){
      this.$refs.hairpinRef.open(row.userid)
    },
    // 修改主播
    async streamerChange(row,index){
      // 0 ：卡不显示 1：显示
      let data={
        userid:row.userid,
        status: row.isRobot==1?2:1
      }
      await userZbStatus(data)
      this.$message({
        type: 'success',
        message: '修改成功'
      });
      this.$nextTick(()=>{
        this.roleList[index].isRobot = row.isRobot==1?2:1
      })
    },
    // 停用账户
    async switchChange(row,index){
      // 0 ：卡不显示 1：显示
      let data={
        userid:row.userid,
        status: row.status==1?0:1
      }
      await userStatus(data)
      this.$message({
        type: 'success',
        message: '修改成功'
      });
      this.$nextTick(()=>{
        this.roleList[index].status = row.status==1?0:1
      })
    },
    handlewater(row){
      this.$refs.waterRef.onOpen(row.userid)
    },
    /** 查询角色列表 */
    async getList() {
      this.loading = true
      let res = await listPage(this.queryParams)
      this.roleList = res.data.records.map(item=>{
        return{
          ...item,
          isRobot:item.isRobot=='用户'?1:2
        }
      })
      this.total = res.data.total
      this.loading = false
    },
    // 积分
    points(row){
      this.$refs.processDataRef.open(row.userid,1)
      return
    },
    // 支付宝
    handleAlipay(row,type){},
    // 能量操作
    energy(row){
      this.$refs.processDataRef.open(row.userid,2)
      return
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 靓号
    fancyNumber(row){
      this.$refs.fancyNumberRef.open(row.userid)
      // this.$prompt('请输入靓号', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      // }).then(async ({ value }) => {
      //   let data={
      //     idNumber:value,
      //     userid:row.userid
      //   }
      //   await updateIdnumber(data)
      //   this.$message({
      //     type: 'success',
      //     message: '修改成功'
      //   });
      //   this.getList()
      // })
    },
    // 表单重置
    reset() {
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm("queryForm")
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
     this.$refs.addRef.onOpen()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$refs.addRef.onOpen(row)
    },
  }
}
</script>
